<!-- 
  @author : andy
  @description : 面包屑组件
-->
<template>
  <nav class="layout-bread-crumb">
    <TransitionGroup tag="div" class="bread-crumb-inner" name="breadcrumb">
      <div @click="router.push('/')" v-if="config.breadcrumb.showHome" class="crumb-item" key="home" :class="config.breadcrumb.style">
        <HomeOutlined v-if="showIcon" class="home-icon" />
        <span class="crumb-text">主页</span>
        <RightOutlined class="right-arrow-icon" v-if="config.breadcrumb.style === 'normal'" />
      </div>
      <template v-for="(crumb , index) in breadCrumbs" :key="crumb.name">
        <div class="crumb-item" :class="config.breadcrumb.style" @click="onClick(crumb)">
          <span class="crumb-icon" v-if="crumb.icon && showIcon">
            <img :src="crumb.icon" />
          </span>
          <span class="crumb-text">{{crumb.name}}</span>
          <RightOutlined class="right-arrow-icon" v-if="index < breadCrumbs.length - 1 && config.breadcrumb.style === 'normal'" />
        </div>
      </template>
    </TransitionGroup>
  </nav>
</template>

<script lang='ts' setup>
import { useRoute , useRouter } from 'vue-router';
import { computed } from 'vue';
import { RightOutlined , HomeOutlined } from '@ant-design/icons-vue';
import { useConfigStore } from '@/stores/configs/config';
import { storeToRefs } from 'pinia';
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
interface IBreadCrumb {
  /** 图标 */
  icon: string;
  /** 路径 */
  path: string;
  /** 名称 */
  name: string;
}
type BreadCrumbProps = {
  /** 是否显示面包屑导航图标 */
  showIcon?: boolean;
}
defineProps<BreadCrumbProps>()
const route = useRoute();
const router = useRouter();
const breadCrumbs = computed(() => {
  const matched = route.matched;
  const breadCrumbList: IBreadCrumb[] = [];
  for (const match of matched) {
    const { path , meta } = match;
    const { icon , title } = meta;
    if (path !== '/') {
      breadCrumbList.push({
        icon : icon as string,
        path : path || route.path,
        name : title as string
      })
    }
  }
  return breadCrumbList;
});
const onClick = (item: IBreadCrumb) => {
  router.push(item.path);
}
</script>

<style lang='less' scoped>
.layout-bread-crumb {
  display: flex;
  align-items: center;
  margin-left: 0.16rem;
  .right-arrow-icon {
    font-size: var(--font-size-small);
    margin: 0 0.06rem;
    position: relative;
    top: 0.01rem;
    .useTheme({
      color: text-color-secondary;
    })
  }
  .bread-crumb-inner {
    display: flex;
  }
  .crumb-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    height: 0.32rem;
    .home-icon {
      font-size: var(--font-size-medium);
      transition: all 0.2s;
      margin-right: 0.04rem;
    }
    &.background {
      .useTheme({
        background-color: border-color;
      } , 0.5);
      padding: 0.1rem;
      margin-right: 0.24rem;
      position: relative;
      &::after {
        content: '';
        border-style: solid;
        border-width: 0.16rem;
        height: 0;
        position: absolute;
        top: 0;
        width: 0;
        border-color: transparent;
        .useTheme({
          border-left-color: border-color;
        } , 0.5);
        left: 100%;
      }
    }
    .useTheme({
      color: text-color-secondary;
    });
    &:hover {
      .home-icon {
        transform: scale(1.1);
      }
      .useTheme({
        color: text-color;
      });
      .crumb-icon {
        img {
          transform: scale(1.1);
        }
      }
    }
    .crumb-icon {
      width: 0.16rem;
      height: 0.16rem;
      display: flex;
      align-items: center;
      margin-right: 0.04rem;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s;
      }
    }
    .crumb-text {
      font-size: var(--font-size-medium);
      .useTheme({
        color: text-color;
      })
    }
  }
  .breadcrumb-enter-active {
    transition:
      transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
      opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  }
  .breadcrumb-leave-active {
    display: none;
  }
  .breadcrumb-enter-from {
    opacity: 0;
    transform: translateX(30px) skewX(-30deg);
  }
}
</style>